<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
    style="padding-bottom: 20px;">
    <a-row>
      <a-col :span="8">
        <!-- <a-form-model-item label="被谈话人" v-if="isDisabled" required prop="personId">
          <a-input v-model="form.personId" :disabled="isDisabled" placeholder="请输入" />
        </a-form-model-item> -->
        <a-form-model-item label="被谈话人" required prop="personId">
          <a-select style="width:100%;" v-model="form.personId" :disabled="isDisabled" allowClear>
            <a-select-option v-for="(item, index) in personList" :key="index" :value="item.sjskPersonId"
              @click.native="nameChange(item)">{{
    item.realName
}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="身份证号" prop="identityCard">
          <a-input v-model="form.identityCard" :disabled="isDisabled || isDisabled1" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="访谈次数" prop="interviewNum">
          <a-input v-model="form.interviewNum" :disabled="isDisabled || isDisabled1" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8">
        <a-form-model-item label="访谈类型" prop="interviewType">
          <a-select v-model="form.interviewType" :disabled="isDisabled || isDisabled1" placeholder="请选择">
            <a-select-option value="1">定期访谈</a-select-option>
            <a-select-option value="2">日常访谈</a-select-option>
            <a-select-option value="3">帮教谈心</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="访谈人员" prop="interviewerName">
          <a-input v-model="form.interviewerName" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="谈话时间" required prop="talkTime">
          <a-date-picker allowClear v-model="form.talkTime" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
            style="width:100%" />
        </a-form-model-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="16" class="qyItem">
        <a-form-model-item label="谈话地点" prop="placeConConversationIdArr">
          <z-linkage-area placeholder="请选择行政区划" v-model="form.placeConConversationIdArr" @rows="onRows"
            @change="setAdminDivisions" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="详细地址" prop="detailConAddress">
          <a-input v-model="form.detailConAddress" placeholder="请输入" />
        </a-form-model-item>
      </a-col>
    </a-row>
  </a-form-model>
</template>
<script>
// import * as personServiceApi from '@/api/sjsk/personService.js'
import { sjskPersonList } from '@/api/sjsk/help/interview.js'
import * as educationTalk from '@/api/sjsk/help/educationTalk.js'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  components: {},
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        personId: undefined,
        identityCard: undefined,
        interviewType: "3", //只有帮教谈心，写死
        interviewNum: undefined,
        talkTime: undefined,
        interviewerName: undefined,
        interviewPlaceId: undefined,
        placeConConversationIdArr: undefined,
        detailConAddress: undefined,
      },
      rules: {
        personId: [{ required: true, message: '请选择' }],
        identityCard: [{ required: true, message: '请输入' }],
        interviewType: [{ required: true, message: '请选择' }],
        interviewNum: [{ required: true, message: '请输入' }],
        interviewerName: [{ required: true, message: '请输入' }],
        talkTime: [{ required: true, message: '请选择' }],
        placeConConversationIdArr: [{ required: true, message: '请选择' }],
        detailConAddress: [{ required: true, message: '请输入' }],
      },
      isDisabled: false,
      isDisabled1: true,
      personList: [],
      infoData: {}
    }
  },
  created() {
    // this.form.interviewerName = Vue.ls.get(USER_INFO).realname

  },
  methods: {
    setDepartmentId(departmentId) {
      let params = {
        departmentId: departmentId,
        // dockingId: Vue.ls.get(USER_INFO).id
      }
      this.getSJSK(params)
    },
    //读取该专干管辖内的吸毒人员
    getSJSK(params) {
      sjskPersonList(params).then(res => {
        if (res.success) {
          this.personList = res.result
        }
      })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    nameChange(e) {
      this.infoData = e
      this.$emit("personChange", { sjskPersonId: e.sjskPersonId, sjskType: e.sjskType })
    },
    //读不到预约信息，就设置基本信息
    setInfo() {
      this.form = {}
      console.log(this.infoData)
      this.$set(this.form, 'personId', this.infoData.sjskPersonId)
      this.$set(this.form, 'interviewerName', Vue.ls.get(USER_INFO).realname)
      this.$set(this.form, 'interviewerId', Vue.ls.get(USER_INFO).id)
      this.$set(this.form, 'realName', this.infoData.realName)
      this.$set(this.form, 'identityCard', this.infoData.identityCard)
      this.$set(this.form, 'realName', this.infoData.realName)
      this.$set(this.form, 'interviewType', "3")
      let params = {
        id: this.infoData.sjskPersonId,
        type: this.infoData.sjskType
      }
      this.getInterviewNum(params)
    },
    getInterviewNum(params) {
      educationTalk.intNum(params).then(res => {
        if (res.success) {
          if (res.result == null) {
            this.$set(this.form, 'interviewNum', "第0次")
          } else {
            this.$set(this.form, 'interviewNum', "第" + res.result + "次")
          }

        }
      })
    },
    // 获取行政区划的值
    setAdminDivisions(value) {
      // console.log("1111")
      // console.log(value)
    },
    onRows(row) {
      // console.log("value")
      // console.log(row)
      let str = ""
      row.forEach(item => {
        str += item.title + "," //保存行政区划名称
      })
      this.form.placeConConversation = str.slice(0, str.length - 1) //删除最后一个逗号
      // console.log(this.form.interviewPlace)
    },
    onValidate() {
      let isValid = false
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          isValid = true
        } else {
          isValid = false
        }
      })
      if (isValid) {
        return true
      } else {
        return false
      }
    },
    getData() {
      this.form.placeConConversationId = this.form.placeConConversationIdArr.join() //访谈地址id转字符串
      // console.log(this.form.interviewNum)
      this.form.interviewNum = this.form.interviewNum.substring(1, this.form.interviewNum.length - 1) //截取数字字符,即次数
      // console.log(this.form.interviewNum)
      return this.form
    },
    setData(obj, isRecordAdd) {
      // console.log("obj")
      // console.log(obj)
      if (isRecordAdd) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
      this.isDisabled1 = true
      this.form = { type: "3" } //固定为帮教谈心
      this.form.id = obj.id
      // console.log("111111111")
      // console.log(this.infoData.sjskPersonId)
      this.$set(this.form, 'personId', this.infoData.sjskPersonId)
      this.$set(this.form, 'interviewerName', Vue.ls.get(USER_INFO).realname)

      this.form.interviewerId = Vue.ls.get(USER_INFO).id
      // if (obj.personId != null) {
      //   this.form.personId = Number(obj.personId)
      // }
      this.form.identityCard = obj.identityCard
      this.form.interviewType = "3"
      //设置访谈地址
      // this.form.placeConConversationId = obj.placeConversationId
      if (obj.placeConversationId != null) {
        this.form.placeConConversationIdArr = obj.placeConversationId.split(',')
      }
      if (obj.detailAddress != null) {
        this.form.detailConAddress = obj.detailAddress
      }
      if (obj.interviewNum == null) {
        this.form.interviewNum = "第0次"
      } else {
        this.$set(this.form, 'interviewNum', "第" + obj.interviewNum + "次")
      }
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > this.moment().endOf('day')
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56]
      }
    }
  }
}
</script>
<style scoped lang="less">
.pt {
  margin-top: 20px;
  // font-size: 16px;
  font-weight: bold;
  padding-top: 20px;
  border-top: 1px dotted #E9E9E9;
}

/deep/.ant-form-item {
  margin-bottom: 10px;
}

/deep/.ant-col-sm-3 {
  width: 10.5%;
}

/deep/.ant-col-sm-21 {
  width: 89.5%;
}

.qyItem {
  /deep/.ant-col-8 {
    width: 17%;
  }

  /deep/.ant-col-16 {
    width: 83%;
  }
}
</style>
